<template>
  <div>
    <ul>
      <li><router-link to="/?content=蓦然回首">跳转第一个</router-link></li>
      <li>
        <router-link :to="{ path: 'two', query: { content: '那人却在' } }"
          >跳转第二个</router-link
        >
      </li>
      <li>
        <router-link
          :to="{
            name: 'three',
            params: {
              content: '灯火阑珊处',
            },
          }"
          >跳转第三个</router-link
        >
      </li>
      <button @click="btn1">跳转第一个</button>
      <button @click="btn2">跳转第二个</button>
      <button @click="btn3">跳转第三个</button>
    </ul>

    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {

    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    btn1 () {
      this.$router.push('/?id=1&name=杰尼龟&age=80').catch(err => { })
    },
    btn2 () {
      //编程式导航----路由传参--query传参
      this.$router.push(
        {
          path: '/two',
          query: {
            id: 2,
            name: '李云龙',
            age: 50
          }

        }
      ).catch(err => { })
    },
    //编程式导航----路由传参--query传参
    btn3 () {
      this.$router.push({
        name: 'three',
        params: {
          id: 3,
          name: '喷火龙',
          age: 60
        }
      }).catch(err => { })
    },
  }
}
</script>
<style lang='less'  scoped>
ul {
  width: 500px;
  display: flex;
  justify-content: space-around;

  margin-left: 20px;
}
</style>
